<!DOCTYPE html>
<html>
<head>
    <title>开动啦·体重曲线</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <!-- Bootstrap -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/echarts/asset/css/bootstrap.css" rel="stylesheet">
    <link href="/echarts/asset/css/carousel.css" rel="stylesheet">
    <link href="/echarts/asset/css/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="/echarts/asset/js/esl/esl.js"></script>
    <script src="/echarts/asset/js/codemirror.js"></script>
    <script src="/echarts/asset/js/javascript.js"></script>

    <link href="/echarts/asset/css/codemirror.css" rel="stylesheet">
    <link href="/echarts/asset/css/monokai.css" rel="stylesheet">
    <script src="/echarts/example/www/js/esl.js"></script>
    <script src="/echarts/example/www2/js/echarts-plain.js"></script>

</head>
<body style="">


<!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths:{
            echarts:'/echarts/example/www/js/echarts',
            'echarts/chart/bar' : '/echarts/example/www/js/echarts-map',
            'echarts/chart/line': '/echarts/example/www/js/echarts-map',
            'echarts/chart/map' : '/echarts/example/www/js/echarts-map'
        }
    });

    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function (ec) {

            // --- 地图 ---
            var myChart2 = ec.init(document.getElementById('mainMap'));
            myChart2.setOption({
                title : {
                    text: '体重变化曲线图',
                    subtext: ''
                },
                tooltip : {
                    trigger: 'axis'
                },

                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data : [<?php echo $date;?>]
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        scale:true,
                        axisLabel : {
                            formatter: '{value} KG'
                        }
                    }
                ],
                scale : false,
                series : [
                    {
                        name:'体重',
                        type:'line',
                        data:[<?php echo $weight;?>],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        }
                    }
                ]
            });

        }
    );
</script>
</body>
</html>